<template>
  <h1>单选组件</h1>
  <el-radio-group v-model="edu">
    <el-radio label="学历:专科" value="zk"></el-radio>
    <el-radio label="学历:本科" value="bk"></el-radio>
    <el-radio label="学历:硕士" value="ss"></el-radio>
    <el-radio label="学历:博士" value="bs"></el-radio>
  </el-radio-group>
  <h4>您选择的值为:{{ edu }}</h4>

  <el-radio-group v-model="res">
    <el-radio v-for="item in arr" :label="item.level" :value="item.value"></el-radio>
  </el-radio-group>
  <h4>您选择的值为:{{ res }}</h4>



  <el-radio-group v-model="pr">
    <el-radio-button v-for="p in arr1" :value="p.value" :label="p.level"></el-radio-button>
  </el-radio-group>
  <h4>您选择的值为:{{ pr }}</h4>
</template>

<script setup>
import {ref} from "vue";

//定义变量用来保存学历单选选中的值
const edu = ref('bk');

//要求:定义数组保存员工职级 员工10 经理20 总监30 总裁40 {level:'员工',value:10}
const arr = ref([
    {level:'员工',value:10},
    {level:'经理',value:20},
    {level:'总监',value:30},
    {level:'总裁',value:40}
]);
//遍历此数组,生成单选,在页面中显示 您选择的职级为10
//定义变量用来保存用户选择的职级值
const res = ref(10);
//定义变量保存酒的价格
const pr=ref('')
//定义数组保存酒的种类
const arr1 = ref([
    {level:'茅台',value:2500},
    {level:'五粮液',value:500},
    {level:'汾酒',value:330},
    {level:'梦之蓝',value:368}
])
</script>

<style scoped>

</style>